<template>
  <div class="chart" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initChart(this.chartData)
  },
  methods: {
    initChart(chartData) {
      this.chartInstance = echarts.init(this.$refs.chart)
      const option = {
        color: chartData.colors,
        title: {
          show: true,
          text: chartData.title1 || '',
          subtext: `{number|${chartData.title2}}{unit|${chartData.title3}}`,
          itemGap: 5,
          textAlign: 'center',
          left: '47%',
          top: '34%',
          textStyle: {
            fontFamily: 'MicrosoftYaHeiUI',
            fontSize: 16,
            color: '#ffffff',
            lineHeight: 16
          },
          subtextStyle: {
            rich: {
              number: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontWeight: 'bold',
                fontSize: 20,
                color: '#FFDE00',
                lineHeight: 20
              },
              unit: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontSize: 14,
                color: '#FFFFFF',
                lineHeight: 14
              }
            }
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          valueFormatter: (value) => `${value}${chartData.unit}`
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: ['75%', '90%'],
            avoidLabelOverlap: false,
            padAngle: 10,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              borderColor: '#132e51',
              borderWidth: 4
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: chartData.data
          }
        ]
      }
      this.chartInstance.setOption(option)
    }
  }
}
</script>
<style scoped>
.chart {
  height: 100%;
}
</style>
